<template>
    <div class="main_content my">
    <group>
        <x-input keyboard="number" :max="11" placeholder="请输入手机号" v-model="phone">
            <div slot="label" style="margin-right: 0.26rem" class="phone_icon"></div>
        </x-input>
        <x-input class="weui-vcode" placeholder="请输入手机验证码" v-model="yanzhengma">
            <div slot="label" style="margin-right: 0.26rem" class="yanzhengma_icon"></div>
            <x-button v-if="!btn" slot="right" :class="disabled" :disabled="disabled !== ''" :button-primary-bg-color="color" @click.native="fasong" type="primary" mini>发送验证码</x-button>
            <x-button v-else slot="right" :class="btn?'disabled':''" :disabled="btn" :button-primary-bg-color="color" @click.native="fasong" type="primary" mini>{{text}}s后重新发送</x-button>
        </x-input>
    </group>
        <div class="f" style="width: 100%;padding: 0 0.5rem;margin-top: 1rem">
            <x-button style="width: 100%;height: 0.8rem;font-size:0.32rem " :class="disabledTwo" :disabled="disabledTwo!== ''" :button-primary-bg-color="color" @click.native="bangding" type="primary" mini>手机号绑定</x-button>
        </div>

    </div>

</template>
<script>
    import { XInput, Group,XButton } from 'vux'
    export default{
        name:"bindingPhone",
        components: {
            XInput,
            Group,
            XButton
        },
        data(){
            return {
                color:"#e94f4f",
                phone:'',
                disabled:'disabled',
                disabledTwo:'disabled',
                yanzhengma:'',
                btn:false,
                text:60
            }
        },
        activated(){
            this.init();
        },
        deactivated(){
            this.text = -1;
        },
        methods:{
            init(){
                this.phone = '';
                this.disabled= 'disabled';
                this.disabledTwo='disabled';
                this.yanzhengma='';
                this.btn = false;
                this.text = 60;
            },
            fasong(){  //发送验证码
                this.$ajax.inFo.sendRegisterSmsCode({mobileNo:this.phone})
                    .then((res)=>{
                        this.btn = true;
                        this.$vux.toast.text('验证码已发送','middle')
                        this.text = 60;
                        let that = this;
                        setInterval(function () {
                            if(that.text){
                                that.text--
                            }
                        },1000)
                    })
            },

            bangding(){  //绑定
                let data = {
                    mobileNO: this.phone, //String类型，手机号码
                    validCode: this.yanzhengma, //                String类型，短信验证码
                    uid: this.comJS.getCookie('uid') //
                }
                this.$ajax.inFo.registerByValidCode(data)
                    .then((res)=>{
                        this.$vux.toast.text('绑定成功','middle')
                        let that = this;
                        setTimeout(function () {
                            that.$router.push(that.$route.query.redirect);
                        },1000)
                    })
                    .catch(()=>{
                        this.text = '重新发送'
                        this.btn = false
                    })

            }
        },
        watch:{
            phone:function () {
                if(this.comJS.checkIsTel(this.phone)){
                    this.disabled = 'disabled';
                }else if(!this.comJS.checkIsTel(this.phone) && this.btn && this.yanzhengma){
                    this.disabledTwo = '';
                }else{
                    this.disabled = '';
                    this.disabledTwo = 'disabled';
                }
            },
            yanzhengma:function () {
                if (this.yanzhengma && !this.comJS.checkIsTel(this.phone)&& this.btn){
                    this.disabledTwo = '';
                }else{
                    this.disabledTwo = 'disabled';

                }
            },
            btn:function(){
                if(!this.comJS.checkIsTel(this.phone) && this.btn && this.yanzhengma){
                    this.disabledTwo = '';
                }else{
                    this.disabledTwo = 'disabled';

                }
            },
            text:function () {
                if(this.text <= 0){
                    this.text = '重新发送'
                    this.btn = false
                }
            }
        }
    }
</script>